<template>
  <el-dialog
    class='userDetails'
    title="选择城市"
    :closeOnClickModal='false'
    :visible="true"
    width="30%"
    :before-close="handleClose"
    append-to-body>
  <div class='content-wrapper projectAuthView' v-loading.fullscreen.lock="fullscreenLoading">
      <el-row class="user-flex">
        <el-col :span='24' style="height: 100%" >
          <div class='formTab' >
            <el-tree
              node-key="id"
              :data="propertyTreeData"
              :props="propertyProps"
              ref="propertyTree"
              style="height: 300px;overflow-y: auto;overflow-x: auto"
              show-checkbox
              :default-checked-keys="checkIdArry"
              :default-expanded-keys="checkIdArry"
            />
          </div>
        </el-col>
      </el-row>
  </div>
  <div slot="footer"  class="dialog-footer" >
    <el-button type="primary" @click="handleClose" style="padding-left: 35px;padding-right: 35px">保存</el-button>
  </div>
  </el-dialog>
</template>
<script>
  import { getCityTree } from '../../api/city'
  export default ({
    name:'CityTree',
    props:{
      checkIds:{
        type: Array,
        required: false
      }
    },
    data(){
      return{
        tabTitle:'选择城市',
        propertyProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        checkIdArry:[],
        propertyTreeData:[],
        //遮罩层的控制
        fullscreenLoading: false,
      }
    },
    methods: {
      //获取城市数据
      fetchTreeData(){
        let that = this;
        getCityTree().then(res=>{
          that.propertyTreeData = res.data;
          that.checkIdArry = [];
          that.checkIdArry = that.checkIds;
        })
      },
      //保存之后的方法处理
      handleClose(){
        let treeDataList = this.$refs.propertyTree.getCheckedNodes();
        let jsonArray =[];
        if(treeDataList.length!=0){
          treeDataList.forEach(node=>{
            if(node.type===3){
              let json ={};
              json.cityId = node.id;
              json.cityName = node.name;
              json.cityCode = node.code;
              jsonArray.push(json);
            }
          });
        }
        this.$emit('handleclose',jsonArray);
      }
    },
    created(){
      this.fetchTreeData();
      console.log("created ==>",this.checkIds)
    },
    mounted(){},
    components:{
    }
  })
</script>
<style>
  .el-transfer .el-transfer-panel {
    border:1px solid #ebeef5;
    border-radius:4px;
    overflow:hidden;
    background:#fff;
    display:inline-block;
    vertical-align:middle;
    width: 350px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 400px;
  }
</style>
<style lang="stylus" scoped>
  .content-wrapper {
    height :100%;
    padding :0 25px;
  }
  .addUser{
    display: flex;
    flex-direction: column;
    .user-flex{
      flex-grow: 1;
      display :flex;
      overflow:auto;

    }
    .dialog-footer{
      margin: 10px 0px
      height 60px
      padding-top 6px
      box-sizing border-box
      text-align right
    }
  }
  .treearea{
    height: 100%;
    margin-right: 20px;
  }
  .formTab{

    height: 100%;
    /*设置一个最大高度*/
    /*max-height :490px;*/
    border-radius:4px ;
    border: 1px solid #c7c7cd ;
    padding :10px;
    box-sizing border-box
    /*添加滚轮操作*/
    /*overflow-y :scroll;*/
  }
  .formTab p{
    color:#00b1a5;
    font-weight bold;
    font-size :20px;
  }
  .formTab .el-input{
    margin-bottom :0px;
  }
  .formTab .el-form .el-form-item .el-input{
    margin-bottom :10px;
  }
  .submitBtn{
    position :absolute;
    left:50%;
    transform :translate(-50%,-50%);
    margin-top 30px;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }

</style>
